<template>
    <div class="payment-table">
      <table>
        <thead>
          <tr v-for="(headerRow, rowIndex) in headers" :key="rowIndex">
            <th
              v-for="(cell, cellIndex) in headerRow"
              :key="`${rowIndex}-${cellIndex}`"
              :colspan="cell.colspan"
              :rowspan="cell.rowspan"
            >
              {{ cell.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in data" :key="index">
            <td v-for="(cell, cellIndex) in dataHeaders" :key="cellIndex">
              {{ formatCell(item[cell.key], cell) }}
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2">合计</td>
            <td v-for="(cell, index) in totalHeaders" :key="index">
              {{ formatCurrency(total[cell.key]) }}
            </td>
            <td colspan="2"></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed, type PropType } from 'vue';
  
  // 增强类型定义
  export interface HeaderCell {
    label: string;
    colspan?: number;
    rowspan?: number;
    key?: keyof PaymentData; // 限定为PaymentData的已知键
    isTotal?: boolean;
    formatter?: (value: any) => string;
  }
  
  export type HeaderRow = HeaderCell[];
  
  export interface PaymentData {
    paymentAccount: string;
    paymentMethod: string;
    paymentAmount: number;
    baseCurrencyAmount: number;
    fee1: number;
    fee2: number;
    transactionNumber: string;
    remark: string;
  }
  
  const props = defineProps({
    data: {
      type: Array as PropType<PaymentData[]>,
      required: true,
      default: () => []
    },
    headers: {
      type: Array as PropType<HeaderRow[]>,
      required: true,
      validator: (value: HeaderRow[]) => 
        value.every(row => 
          row.every(cell => 
            !cell.isTotal || (cell.isTotal && !!cell.key) // 验证isTotal必须配key
          )
        )
    }
  });
  
  // 增强计算属性类型安全
  const dataHeaders = computed(() => 
    props.headers[props.headers.length - 1].filter((c): c is HeaderCell & { key: string } => 
      !!c.key
    )
  );
  
  const totalHeaders = computed(() => 
    dataHeaders.value.filter(c => c.isTotal)
  );
  
  const total = computed(() => {
    const sums: Partial<Record<keyof PaymentData, number>> = {};
    
    totalHeaders.value.forEach(header => {
      const key = header.key;
      if (key) {
        sums[key] = props.data.reduce(
          (sum, item) => sum + (Number(item[key]) || 0),
          0
        );
      }
    });
    
    return sums as Record<keyof PaymentData, number>;
  });
  
  // 增强格式化方法
  const formatCell = (value: any, cell: HeaderCell) => {
    if (cell.formatter) return cell.formatter(value);
    if (typeof value === 'number') return formatCurrency(value);
    return value || '-';
  };
  
  const formatCurrency = (value: number) => {
    return value.toFixed(2);
  };
  </script>
  
  <style scoped>
  .payment-table {
    font-family: Arial, sans-serif;
    width: 100%;
    margin: 16px 0;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;
  }
  
  th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid #e0e0e0;
    min-width: 100px;
  }
  
  th {
    background-color: #f5f5f5;
    font-weight: bold;
  }
  
  tfoot td {
    background-color: #f9f9f9;
    font-weight: bold;
  }
  </style>